<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Sharing Your Story</title>
		<link rel="Shortcut Icon" href="public/img/favicon.ico" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
		<script src="public/js/holder.min.js"></script>
	</head>
	<style>
		input[type=file]{
			display: inline;
			margin-top: 5px;
		}
		th, td{
			width: 300px;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		var count = 1;
		function sendFilesNum(){
			var value = document.getElementById("fileNum").value;
			if(isNaN(value)||value > 5||value < 1){
				document.getElementById("fileNumError").style.color="red";
				document.getElementById("fileNumError").innerHTML="一次上传的文件数量为[1, 5]";
				return false;
			}
			document.getElementById("fileNumError").innerHTML="数量合理！";
			document.getElementById("fileNumError").style.color="green";
			for(var i = 2; i <= count; i++){
				$("#dfile"+i).remove();
			}
			var ele = document.getElementById("files");
			for(var i = 2; i <= value; i++)
			{
				$("#files").before("<div id='dfile"+i+"'>文件"+i+"： <input type='file' id = 'file"+i+"' name='file"+i+"' /></div>");
			}
			count = value;
			return true;
		}
		function checkForm(){
			var flag = true;
			for(var i = 1; i <= count; i++){
				if(document.getElementById("file"+i).value == ""){
					flag = false;
					alert("文件不得为空！")
					break;
				}
				if(document.getElementById("file"+i).value.length > 90){
					alert(document.getElementById("file"+i).value.length);
					flag = false;
					alert("文件名过长！")
					break;
				}
			}
			return flag;
		}
		function deleteFile(fileId,obj){
			$.ajax({
				url:"${pageContext.request.contextPath}/UploadOpeAsy?operation=delete",
				async:true,
				type:"POST",
				data:{"fileId":fileId},
				success:function(webData){
					if(webData.isSucess){
						alert("删除成功！");
						obj = obj.parentNode.parentNode;
						obj.remove();
					}else{
						alert("删除失败！");
					}
				},
				error:function(){
					alert("请求失败");
				},
				dataType:"json"
			});
		}
		function deleteDownRecord(fileId, downTime, obj){
			$.ajax({
				url:"${pageContext.request.contextPath}/myHomeAsy?method=delete",
				async:true,
				type:"POST",
				data:{"fileId":fileId,"downTime":downTime},
				success:function(webData){
					if(webData.isdelete){
						alert("删除纪录成功！");
						obj = obj.parentNode.parentNode;
						obj.remove();
					}else{
						alert("删除纪录失败！");
					}
				},
				error:function(){
					alert("请求失败");
				},
				dataType:"json"
			});
		}
		function postMsg(){
			var str = document.getElementById("msg").value;
			if(str.length > 40)
			{
				alert("字数太长！");
				return;
			}
			$.ajax({
				url:"${pageContext.request.contextPath}/myHomeAsy?method=postMsg",
				async:true,
				type:"POST",
				data:{"msg":str},
				success:function(WebData){
					if(WebData.isSuc){
						alert("发布成功");
					}
				},
				error:function(){
					alert("发布失败");
				},
				dataType:"json"
			});
		}
	</script>
	<body>
		<!--顶部效果-->
		<%@ include file= "/WEB-INF/zpublicpages/header.jsp" %>
		<!-- 主页效果 -->
		<div class="container" style="margin-top: 10px; font-size: 20px;">
			<div class="row">
				
				<ul id="myTab" class="nav nav-tabs">
					<li class="active">
						<a href="#toUpload" data-toggle="tab">我要上传</a>
					</li>
					<li>
						<a href="#uploadRecord" data-toggle="tab">上传记录</a>
					</li>
					<li>
						<a href="#downloadRecord" data-toggle="tab">下载记录</a>
					</li>
					<li>
						<a href="#postMsg" data-toggle="tab">发布留言</a>
					</li>
					<li>
						<a target="_blank" href="${pageContext.request.contextPath}/homeUI">资源下载</a>
					</li>
				</ul>
				<div id="myTabContent" class="tab-content" style="margin-top: 20px;line-height: 2;">
					<div class="tab-pane fade in active" id="toUpload">
						
						<div class="mycontainer">
							<div>
								<span class="glyphicon glyphicon-font"  style="font-size: 30px;">
									<div style="float: right;">&nbsp;&nbsp;&nbsp;：文件个数</div>
								</span>
								<div style="background-color: #e4e4e4; height: 2px; margin-left: -10px; margin-right: -10px; margin-top: 10px; margin-bottom: 10px;"></div>
								<!-- 文件个数 -->
								<div class="panel-body">
									<form action="#" method='post' onsubmit="return false">
										<div class="container">
											<div class="row">
												<div class="col-md-offset-1 col-md-3">
													<div class="form-group">
														<div class="input-group input-group-lg">
															<span class="input-group-addon">
																<span class='glyphicon glyphicon-list'></span>
															</span>
															<input type="text" name="fileNum" class='form-control'
																placeholder='1' id='fileNum'>
														</div>
													</div>
												</div>
												<div class="col-md-offset-1 col-md-3">
													<div class="form-group ok" style="text-align: center;">
														<input style="width: 100%;" type="submit" value="提交" onclick = "sendFilesNum()" class='btn btn-primary btn-lg'>
													</div>
												</div>
												<div class="col-md-3">
													<h4 class="error" id="fileNumError" style="margin-top:32px; color:blue;">请输入上传的文件个数！&nbsp;</h4>
												</div>
											</div>
										</div>						
									</form>
								</div>
								
								<!-- 文件上传表单 -->
								<span class="glyphicon glyphicon-bold"  style="font-size: 30px;">
									<div style="float: right;">&nbsp;&nbsp;&nbsp;：文件上传</div>
								</span>
								<div style="background-color: #e4e4e4; height: 2px; margin-left: -10px; margin-right: -10px; margin-top: 10px; margin-bottom: 10px;"></div>
								<form action="${pageContext.request.contextPath}/file?operation=up" method="post" 
									enctype="multipart/form-data" onsubmit="return checkForm()">
									<div class="col-md-offset-3 col-md-6">
										<div>
											文件1：  <input type="file" id="file1" name="file1"/>
										</div>
										<div id="files"></div>
									</div>
									<div>
										<input type="submit" style="margin-top:100px;" value="上传"/>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="uploadRecord">
						<table style="margin: 0 auto;">
							<tr>
								<th style="width:40%;">文件名称</th>
								<th>上传时间</th>
								<th>删除文件</th>
								<th>文件状态</th>
							</tr>
							<c:forEach items="${requestScope.records}" var="eRecord">
								<tr>
									<td>${eRecord.fileId}</td>
									<td>${eRecord.upTime}</td>
									<td>
										<button onclick="deleteFile('${eRecord.fileId}',this);"
											 style="border:0px;background-color:transparent;">
											<div class="glyphicon glyphicon-remove"></div>
										</button>
									</td>
									<td>
										<c:if test="${eRecord.status eq 0}">
											未审批
										</c:if>
										<c:if test="${eRecord.status eq 1}">
											可下载
										</c:if>
										<c:if test="${eRecord.status eq 2}">
											被冻结
										</c:if>
										<c:if test="${eRecord.status eq 3}">
											不通过
										</c:if>
									</td>
								</tr>
							</c:forEach>
						</table>
					</div>
					<div class="tab-pane fade" id="downloadRecord">
						<table style="margin: 0 auto;">
							<tr>
								<th>文件名称</th>
								<th>下载时间</th>
								<th>删除记录</th>
							</tr>
							<c:forEach items="${requestScope.downRecords}" var="eRecord">
								<tr>
									<td>${eRecord.fileId}</td>
									<td>${eRecord.downTime}</td>
									<td>
										<button onclick="deleteDownRecord('${eRecord.fileId}','${eRecord.downTime}',this);"
											 style="border:0px;background-color:transparent;">
											<div class="glyphicon glyphicon-remove"></div>
										</button>
									</td>
								</tr>
							</c:forEach>
						</table>
					</div>
					<div class="tab-pane fade" id="postMsg" style="margin-bottom:20%;">
						<div style="margin-bottom:10px; margin-left:20px;">发布留言：</div>
						<form action="#" class="form-horizontal" onsubmit="return false">
						 	<div class="form-group" style="width:90%; margin:0 auto;">
						   		<textarea id="msg" class="form-control" rows="3" style="font-size:20px;"></textarea>
						  	</div>
							<div class="form-group">
							   <div class="col-sm-offset-2 col-sm-10" style="pading-right:20px;">
								   <button type="submit" class="btn btn-primary btn-lg" onclick="postMsg()">发布留言</button>
							   </div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
				
		<!--底部效果-->
		<%@ include file="/WEB-INF/zpublicpages/footer.jsp"%>
	</body>
</html>